<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/FJL.css">
	<link rel="stylesheet" type="text/css" href="css/FJL.picker.css" />
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>
	<title>查询明细-我的交易明细</title>
</head>
<body>
	<header>
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>查询明细</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="nulldiv"></div>
	<div class="container">
		<div class="choosebox">
			<p>请选择查询明细<span class="isall">全部</span></p>
		</div>
		<div class="choosewrap">
			<p>
				<a href="javascript:void(0);" title="" class="thisday">本日</a>
				<a href="javascript:void(0);" title="" class="sgoday">近1周</a>
				<a href="javascript:void(0);" title="" class="omonth">近1月</a>
				<a href="javascript:void(0);" title="" class="tmonth">近3月</a>
				<a href="javascript:void(0);" title="" class="smonth">近6月</a>
			</p>
		</div>
		<div class="choosetime">
			<form role="form">
				<ul class="list-group">
				   <li class="list-group-item">
						<div class="input-group">
						  <span class="input-group-addon">起始时间</span>
						  <input type="text" name="start_date" id="start_date" class="timebtn time-btn" readonly="readonly" value="2017-12-14"  data-options='{"type":"date","beginYear":2000,"endYear":2086}' />
						</div>
				   </li>
				   <li class="list-group-item">
						<div class="input-group">
						  <span class="input-group-addon">结束时间</span>
						  <input type="text" name="end_date" id="end_date" readonly="readonly" value="2018-01-25" class="endbtn"   data-options='{"type":"date","beginYear":2000,"endYear":2086}'/>
						</div>
				   </li>
				</ul>
				<div class="btnwrap">
					<button type="button" class="btn btn-pink">确定</button>
				</div>
			</form>
		</div>
	</div>

	<!-- 选择全部的模态文件 -->
	<div class="allbox">
		<form action="">
			<ul class="list-group">
		    	<li class="list-group-item">
					<label for=""><input type="radio" name="check" checked="checked" value="全部">全部</label>
		    	</li>
		    	<li class="list-group-item">
					<label for=""><input type="radio" name="check" value="支出">支出</label>
		    	</li>
		    	<li class="list-group-item">
					<label for=""><input type="radio" name="check" value="收入">收入</label>
		    	</li>
		    </ul>
		</form>
	</div>
	
</body>
<script src="js/FJL.min.js"></script>
<script src="js/FJL.picker.min.js"></script>
<script type="text/javascript">
	(function($) {
		$.init();
		var result = $('#start_date')[0];
		var btns = $('.timebtn');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					result.value = rs.text;
					picker.dispose();
				});
			}, false);
		});
	})(mui);

	(function($) {
		$.init();
		var result = $('#end_date')[0];
		var btns = $('.endbtn');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					result.value = rs.text;
					picker.dispose();
				});
			}, false);
		});
	})(mui);


	//点击全部切换单选按钮
	$('.isall').on('click',function(){
		$('.allbox').fadeIn();
	})
	$('.allbox').on('click',function(){
		$('.allbox').fadeOut();
		var string = $('.allbox input[name="check"]:checked').val();
		$('.isall').html(string);
	})


	//单个时间判断获取时间函数 计算当天时间
	function getTime(){
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		if(month < 10){
			month = '0'+month;
		}
		if(day < 10){
			day = '0'+day;
		}
		return year + '-' + month + '-' + day;
	}

	function oldTime(oldtime){
		var now = new Date();
		var date = new Date(now.getTime() - oldtime * 24 * 3600 * 1000);
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		if(month < 10){
			month = '0'+month;
		}
		if(day < 10){
			day = '0'+day;
		}
		return oldtime = year + '-' + month + '-' + day;
	}

	//当天时间判断
	$('.thisday').on('click',function(){
		var daytime = getTime();
		var oldtime = oldTime(0);
		$('#start_date').val(oldtime);
		$('#end_date').val(daytime);
	})

	//近一周时间判断
	$('.sgoday').on('click',function(){
		var daytime = getTime();
		var oldtime = oldTime(7);
		$('#start_date').val(oldtime);
		$('#end_date').val(daytime);
	})

	function getPreMonth(date,mon) {
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var day = arr[2]; //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中月的天数
        var year2 = year;
        var month2 = parseInt(month) - mon;
        if (month2 <= 0) {//如果是1月份，则取上一年的12月份
            year2 = parseInt(year2) - 1;
            month2 = 12 - (mon-1);
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {//如果原来日期大于上一月的日期，则取当月的最大日期。比如3月的30日，在2月中没有30
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;//月份填补成2位。
        }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }
    

    //近一月时间
    $('.omonth').on('click',function(){
    	var daytime = getTime();
    	var oldtime = getPreMonth(daytime,1);
    	$('#start_date').val(oldtime);
		$('#end_date').val(daytime);
    })
    //近三月时间
    $('.tmonth').on('click',function(){
    	var daytime = getTime();
    	var oldtime = getPreMonth(daytime,3);
    	$('#start_date').val(oldtime);
		$('#end_date').val(daytime);
    })
    //近六月时间
    $('.smonth').on('click',function(){
    	var daytime = getTime();
    	var oldtime = getPreMonth(daytime,6);
    	$('#start_date').val(oldtime);
		$('#end_date').val(daytime);
    })
</script>
</html>